<template>
  <el-row class="details fff">
    <el-row>
      <el-form
        ref="addForm"
        :inline="true"
        :rules="rules"
        :model="addForm"
        label-position="top"
        class="search"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区编号">
              <el-input v-model="addForm.code" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属仓库" prop="warehouseId">
              <el-select
                v-model="addForm.warehouseId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in warehouseType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区名称" prop="name">
              <el-input
                v-model="addForm.name"
                placeholder="请输入"
                :clearable="true"
                max="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select
                v-model="addForm.temperatureType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in temperatureType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="addForm.bearingType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in bearingType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途类型" prop="useType">
              <el-select
                v-model="addForm.useType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in useType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人" prop="personName">
              <el-input
                v-model="addForm.personName"
                placeholder="请输入"
                :clearable="true"
                max="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="addForm.phone"
                type="number"
                placeholder="请输入"
                :clearable="true"
                max="10"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="6">
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="addForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item></el-col>
      </el-form></el-row>

    <el-row class="submit">
      <el-button
        @click="$router.push('/manage-base-info/area')"
      >返回</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-row>
  </el-row>
</template>

<script>
import { temperatureType, bearingType, useType } from '@/constant/area'
import { nextCodeFactory } from '@/api/codeFactory'
import { getWarehouseList } from '@/api/wareHouse'
import { addArea, setArea, queryArea } from '@/api/area'
export default {
  data() {
    return {
      temperatureType,
      bearingType,
      useType,
      warehouseType: null,
      addForm: {
        bearingType: null,
        code: null,
        warehouseId: null,
        name: null,
        personName: null,
        phone: null,
        status: 1,
        useType: null,
        temperatureType: null
      },
      rules: {
        name: {
          required: true,
          max: 10,
          message: '请输入库区名称',
          trigger: 'blur'
        },
        bearingType: {
          required: true,
          message: '请选择承重类型',
          trigger: 'blur'
        },
        code: { required: true, message: '请输入库区编码', trigger: 'blur' },
        warehouseId: {
          required: true,
          message: '请选择所属仓库',
          trigger: 'blur'
        },
        temperatureType: {
          required: true,
          message: '请选择温度类型',
          trigger: 'blur'
        },
        useType: { required: true, message: '请选择用途类型', trigger: 'blur' },
        status: { required: true, message: '请选择仓库状态', trigger: 'blur' },
        personName: {
          required: true,
          message: '请输入负责人',
          trigger: 'blur'
        },
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的电话号码' }
        ]
      }
    }
  },
  async created() {
    const { data: { records }} = await getWarehouseList({ status: 1 })
    this.warehouseType = records
    if (this.$route.params.id !== 'null') {
      const { data } = await queryArea(this.$route.params.id)
      this.addForm = data
      console.log(this.addForm)
    } else {
      this.nextCodeFactory()
    }
  },
  methods: {
    async nextCodeFactory() {
      const { data } = await nextCodeFactory('KQ')
      this.addForm.code = data
    },
    onSubmit() {
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          if (this.$route.params.id === 'null') {
            await addArea(this.addForm)
            this.$message.success('新增成功')
          } else {
            await setArea(this.addForm)
            this.$message.success('修改成功')
          }
          this.$router.push('/manage-base-info/area')
        } else {
          this.$message.warning('请完善表单')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit {
  border-top: 1px solid #f5efee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  .el-button {
    width: 170px;
    margin: 20px;
  }
}
</style>
